<script setup lang='ts'>
import type { VxePagerEvents } from 'vxe-table'

import { SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const gridOptions = reactive({
    columns: [
        { field: 'a1', title: '二级项目名称' },
        { field: 'a2', title: '项目负责人' },
        { fixed: 'right', slots: { default: 'opreate' }, title: '操作', width: 100 },
    ],
    data: [{}],
    height: 700,
    rowConfig: {
        keyField: 'enterpriseId',
    },
    showOverflow: false,
})

const initialPage = { currentPage: 1, pageSize: 10, total: 0 }

const tablePage = ref(cloneDeep(initialPage))

const visible = defineModel<boolean>('visible', { required: true })

const dialog = '选择项目'

function cancel() {
    visible.value = false
}

function reset() {
    console.log('🚀 ~ reset ~ reset:')
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialog"
                width="1100"
                :has-footer="false"
                fullscreen
                @cancel="cancel"
                @closed="reset"
    >
        <div class="flex flex-col gap-10 h-900 overflow-y-auto">
            <div class="text-16 font-700">
                请选择xxxee二级项目
            </div>

            <div class="text-16 font-700">
                所属公司:xxx
            </div>

            <SearchTable v-bind="gridOptions"
                         v-model:pager="tablePage"
                         class="flex-1"
                         @page-change="handlePageChange"
            >
                <template #opreate>
                    <el-button text
                               @click="cancel"
                    >
                        选择
                    </el-button>
                </template>
            </SearchTable>
        </div>
    </PlusDialog>
</template>
